<!doctype html>
<html lang="en">
<% include head.ejs %>
<title>登录/注册</title>
<link rel="stylesheet" href="../layui/css/login.css">
<body>
<% if (login) { %>
    <p style="font-size: 20px">用户已登录,请先点击<a href="/logout" style="color: red"> 注销 </a></p>
<% }else { %>
    <canvas id="stars"></canvas>
    <div class="bg layui-anim layui-anim-scaleSpring" style="animation-duration: .6s">
        <div class="sign">
            <div class="login">
                <form class="layui-form" action="">
                    <div class="form-title"><span>Sign in</span></div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="text" name="username" required lay-verify="username" placeholder="Username"
                                   autocomplete="off"
                                   class="layui-input">
                            <i class="layui-icon layui-icon-user" style="font-size: 25px; color: rgb(175,175,175);"></i>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="password" name="password" required lay-verify="pass" placeholder="Password"
                                   autocomplete="off"
                                   class="layui-input">
                            <i class="layui-icon layui-icon-password"
                               style="font-size: 25px; color: rgb(175,175,175);"></i>

                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-radius layui-btn-normal" lay-submit
                                    lay-filter="login">SIGN
                                IN
                            </button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <a id="forgot">Forgot your password?</a>
                        </div>
                    </div>
                </form>

            </div>
            <div class="reg">
                <form class="layui-form" action="">
                    <div class="form-title"><span>Sign up</span></div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="text" name="username" required lay-verify="username" placeholder="Username"
                                   autocomplete="off"
                                   class="layui-input">
                            <i class="layui-icon layui-icon-user" style="font-size: 25px; color: rgb(175,175,175);"></i>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="password" name="password" required lay-verify="pass" placeholder="Password"
                                   autocomplete="off"
                                   class="layui-input">
                            <i class="layui-icon layui-icon-password"
                               style="font-size: 25px; color: rgb(175,175,175);"></i>

                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="password" name="confirm" required lay-verify="confirm"
                                   placeholder="Confirm password"
                                   autocomplete="off"
                                   class="layui-input">
                            <i class="layui-icon layui-icon-password"
                               style="font-size: 25px; color: rgb(175,175,175);"></i>

                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-radius layui-btn-normal" lay-submit
                                    lay-filter="reg">SIGN
                                UP
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
<% } %>

<script>
    layui.use(['form'], function () {
        var form = layui.form;
        form.verify({
            username: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '用户名不能有特殊字符';
                }
                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if (/^\d+\d$/.test(value)) {
                    return '用户名不能全为数字';
                }
                if (!(/^[\S]{6,12}$/.test(value))) {
                    return '用户名必须6到12位，且不能出现空格';
                }
            },
            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ],
            confirm: function (value, item) {
                if (value != $("body > div > div > div.reg > form > div:nth-child(3) > div > input").val()) {
                    return '两次密码不一致'
                }
            }
        });
    });

    //登录
    layui.use('form', function () {
        let form = layui.form;
        let $ = layui.$;
        form.on('submit(login)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            $.ajax({
                method: 'post',
                url: '/login',
                data: {
                    username: data.field.username,
                    password: data.field.password
                },
                success: (res) => {
                    if (res.code == 1) {
                        window.location.href = '/user/' + data.field.username;
                    }
                    if (res.code == 2) {
                        alert(res.msg)
                    }
                }
            })
            return false;
        });
    });

    //注册
    layui.use(['form', 'layer'], function () {
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.$;
        form.on('submit(reg)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            $.ajax({
                method: 'post',
                url: '/reg',
                data: {
                    username: data.field.username,
                    password: data.field.password
                },
                success: (res) => {
                    console.log(res)
                    if (res.code == 1) {
                        layer.alert(res.msg, () => {
                            window.location.href = '/login';
                        })
                    }
                    if (res.code == 2) {
                        alert(res.msg)
                    }
                }
            })
            return false;
        });
    });
</script>
<script src="../layui/login.js"></script>
</body>
</html>